<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind 指令</title>
    <script src="../assets/js/vue.js"></script>
    <style> 
        .fontSize{
            font-size: 24px;
        }
        .color{
            color: red;
        }
        .active{
            background-color: rgb(18, 9, 145);
            color: azure;
        }
    </style>
</head>

<body>
    <h1>v-bind 指令</h1>
    <hr>
    <p>v-bind是处理HTML中的标签属性的，例如
        <div></div>就是一个标签，
        <img>也是一个标签，我们绑定
        <img>上的src进行动态赋值。</p>
    <div id="app">
        <img v-bind:src="imgSrc" alt="这是一张照片">
        <p>我们在data对象在中增加了imgSrc属性来供html调用。</p>
        <h3>v-bind 缩写</h3>
        <textarea name="" id="" cols="30" rows="5" style="resize:none" readonly="readonly">
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
        </textarea>
        <h3>绑定CSS样式</h3>
        <h4>一.直接绑定class样式</h4>
        <div :class="{active:isActive}">   
            1、绑定classA
        </div>
        <div class="istrue" v-bind:class="{active:isActive,'text-dang':hasError}">
            2、判断class 显示与否
        </div>  
        <div :style="objstyle">
            3、绑定style
        </div>
<p>
    v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：
    直接绑定一个样式对象
</p>

        
    </div>
    <script>    
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: 'http://p0bnwspy9.bkt.clouddn.com/%7DK3U_6LDR5QMILUN%5BGIW9NJ.png'
                ,className:{
                    fontSize:false,
                    color:true
                },
                isActive:true,
                hasError: false,
                objstyle:{
                    fontSize:'24px',
                    color:'red'
                }
            }
        })
    </script>

</body>

</html>